<%@page import="com.jfinal.kit.PropKit"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<!-- 新 Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

		<!-- 可选的Bootstrap主题文件（一般不用引入） -->
		<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

		<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
		<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="http://tb1.bdstatic.com/??/tb/static-common/style/tb.js/dialog_29a9417.css,/tb/static-common/lib/tbui/style/all_1888f28.css" />
		<link rel="stylesheet" href="http://tb1.bdstatic.com/??/tb/_/index_7712603.css,/tb/_/search_2e2269a.css" />
		<link href="../wx/css/ddSecond.css" type="text/css" rel="stylesheet"/>
		<title>微信绑定</title>
		
		<style>
		body {
			width: 100%;
			height: 100%;
			background: url(../wx/images/bg1.png) no-repeat center fixed;
			-webkit-background-size: 100% 100%;
			p-family: "微软雅黑";
		}
		.p{
			color:#fff;
			font-family: "微软雅黑";
			line-height: 50px;
			text-align: left;
			
		}
		.container-div{
			border:1px solid #fff;
			width:270px;
			border-radius: 10px;
			margin:auto
		}
		.container-div img{
			border-radius: 10px;
		}
		.container{
			width:270px;
			margin:auto
		}
		</style>
	</head>

	<body >
			<div style="width:100%;text-align:center;color: #fff;" id="wizard-container" >
				<p style="font-size: large;padding-top: 65px;">Sorry! 您还未绑定设备</p>
		 		<img src="../wx/images/bind.png" style="width:320px;margin-top:30px"/>
		 		<div style="margin-left: 190px;margin-top: -68px;">
		 		<p style="font-size: 10px;color: #a5c0d5;">请查看详细步骤进行绑定</p>
		 		<input type="button" class="bind-submit" value="查看绑定步骤">	
		 		</div>
			</div>
			<div class="container" id="step-container" style="display:none">
			    <p class="p" style="padding-top:30px"><strong>第一步:</strong> 在终端设置界面中选取"微信绑定"</p>
			    <div class="container-div">
			    <img src="../wx/images/li.png" class="img-responsive"/>
			    </div>
			    <p>
			    <p class="p"><strong>第二步:</strong> 终端自动生成微信绑定的二维码</p>
			   <div class="container-div">
			   <img src="../wx/images/device-2016-01-25-141020.png" class="img-responsive"/>
			   </div>
			   <p>
			    <p class="p"><strong>第三步:</strong> 用微信扫描二维码并关注</p>
			    <div class="container-div">
			    <img src="../wx/images/guanzhu.jpg" class="img-responsive"/>
			    </div>
			    <p>
			    <p class="p"><strong>第四步:</strong> 关注成功后, 终端绑定成功</p>
			    <div class="container-div">
			    <img src="../wx/images/jiemian.jpg" class="img-responsive"/>
			    </div>
			</div>
	</body>
</html>
<script>
    $(".bind-submit").on('click', function(){
        $("#wizard-container").hide();
        $("#step-container").show();
    })
</script>